<!-- 动态组件容器 -->
 <!-- src/components/Admin/MainContent.vue -->
<template>
  <div class="main-content">
    <!-- 动态组件容器 -->
    <keep-alive>
      <component :is="currentComponent" v-if="currentComponent" />
    </keep-alive>
  </div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue' // 导入 onBeforeUnmount

// 引入所有可能需要显示的组件
import Users from '@/views/Admin/system/users.vue'
import GoodsReturns from '@/views/Admin/goods/returns.vue'
import GoodsCategories from '@/views/Admin/goods/categories.vue'
import GoodsCreate from '@/views/Admin/goods/create.vue'
import GoodsSelling from '@/views/Admin/goods/selling.vue'
import GoodsWarehouse from '@/views/Admin/goods/warehouse.vue'
import OrdersCanceledUnpaid from '@/views/Admin/orders/canceled-unpaid.vue'
import OrdersCanceledPaid from '@/views/Admin/orders/canceled-paid.vue'
import OrdersCompleted from '@/views/Admin/orders/completed.vue'
import OrdersUnprocessed from '@/views/Admin/orders/unprocessed.vue'
import MembersAccounts from '@/views/Admin/members/accounts.vue'
import MembersConsumption from '@/views/Admin/members/consumption.vue'
import MembersPoints from '@/views/Admin/members/points.vue'
import MembersCoupons from '@/views/Admin/members/coupons.vue'
import AnnouncementsManage from '@/views/Admin/announcements/manage.vue'
import CustomerService from '@/views/Admin/others/customer-service.vue'
import Feedback from '@/views/Admin/others/feedback.vue'

// 当前要显示的组件
const currentComponent = ref(null)

// 组件映射表（避免重复 import）
const componentMap = {
  Users,
  GoodsReturns,
  GoodsCategories,
  GoodsCreate,
  GoodsSelling,
  GoodsWarehouse,
  OrdersCanceledUnpaid,
  OrdersCanceledPaid,
  OrdersCompleted,
  OrdersUnprocessed,
  MembersAccounts,
  MembersConsumption,
  MembersPoints,
  MembersCoupons,
  AnnouncementsManage,
  CustomerService,
  Feedback
}

// 加载指定组件
function loadComponent(componentName) {
  if (componentMap[componentName]) {
    currentComponent.value = componentMap[componentName]
  } else {
    console.warn(`未找到名为 ${componentName} 的组件`)
  }
}

// 监听自定义事件（来自 AdminSidebar.vue）
onMounted(() => {
  window.addEventListener('load-component', (event) => {
    const componentName = event.detail?.componentName
    if (componentName) {
      loadComponent(componentName)
    }
  })
})

// 页面卸载时移除监听
onBeforeUnmount(() => {
  window.removeEventListener('load-component', () => {})
})
</script>